import React, { PureComponent } from 'react'
import { Routes, Route, NavLink, useLocation, useNavigate, useParams, Outlet  } from 'react-router-dom'

class About extends PureComponent {
  btnClick = () => {
    console.log(this.props);
    
    this.props.navigate('/about/join')
  }
  render() {
    return (
      <div>
        {/* 
          The end prop changes the matching logic for the active and pending states to only match to the "end" of the NavLink's to path. 
          If the URL is longer than to, it will no longer be considered active.

                Link	                       Current URL	          isActive
          <NavLink to="/tasks" />	          /tasks	                  true
          <NavLink to="/tasks" />	          /tasks/123	              true
          <NavLink to="/tasks" end />	      /tasks	                  true
          <NavLink to="/tasks" end />	      /tasks/123	              false
          <NavLink to="/tasks/" end />	    /tasks	                  false
          <NavLink to="/tasks/" end />	    /tasks/	                  true
         */}
        <NavLink end to="/about" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>企业发展</NavLink>
        <NavLink end to="/about/cultures" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>企业文化</NavLink>
        <NavLink end to="/about/contact" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>关于我们</NavLink>
        <button onClick={this.btnClick}>投递</button>

        {/* 渲染子路由 */}
        <Outlet />
      </div>
    )
  }
}

function withRouter( Child ) {
  return ( props ) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Child { ...props } match={{params}} navigate={ navigate } location={ location } />
  }
}

export default withRouter(About)
